﻿<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>IDC</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/buttons.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/swipebox.css">
    <style type="text/css">
        body {
            background-image: url(img/bac.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            color: #fff;
        }

        #main {
            text-align: center;
        }

        img {
            width: 100%;
        }

        p {
            margin: 0;
        }

        header {
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }

        header #title {
            display: flex;
            align-items: center;
        }

        header #title span {
            font-weight: bold;
            font-size: 20px;
            margin-right: 5px;
        }

        header #title small {
            line-height: 10px;
            padding: 2px;
            border: 1px solid rgba(253, 195, 195, 0.8);
            font-size: 10px;
            font-style: normal;
            color: #da7272;
            background-color: rgba(241, 105, 105, 0.1);
        }

        header #logo {
            max-width: 200px;
            width: 15%;
            position: relative;
        }

        header #logo,header #title,header p{
            margin-bottom: 30px;
        }
        header #logo:before {
            position: absolute;
            content: "";
            bottom: -10%;
            left: -5%;
            height: 10%;
            width: 110%;
            background: url() no-repeat scroll 0 0;
            background-size: cover;
            z-index: 1;
        }

        #page {
            border: none;
        }

        #page td {
            border: none;
        }

        #page img {
            width: 150px;
        }

        #swipebox-slider .slide img,
        #swipebox-slider .slide .swipebox-video-container {
            max-height: 85%;
        }

        .icon-download {
            position: relative;
            display: inline-block;
            padding-right: 16px;
        }

        .icon-download:after {
            position: absolute;
            content: '';
            right: 0;
            top: 10px;
            width: 11px;
            height: 13px;
            background: url() no-repeat 0 0;
            background-size: 100% auto;
        }

        footer {
            padding: 10px;
            color: #ccc;
            font-size: 12px;
        }

        footer .detail-expain {
            padding: 10px;
            position: relative;
            background: rgba(0, 0, 0, 0.7);
        }

        footer .detail-version {
            padding: 10px;
            background: rgba(0, 0, 0, 0.7);
            margin-top: 5px;
        }

        .ellipsis-expain p {
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .detail-expain p {
            line-height: 1.5;
            height: auto;
            overflow: hidden;
            -webkit-transition: height .3s;
            transition: height .3s;
        }

        .detail-expain .more-btn {
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 0;
            right: 10px;
        }

        .down-arrow:after {
            position: absolute;
            content: '';
            height: 7px;
            width: 13px;
            background: url() no-repeat scroll 0 0;
            background-size: cover;
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: transform .3s;
            transition: transform .3s;
        }

        .detail-expain .more-btn:after {
            top: 10px;
            left: 2px;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .ellipsis-expain .more-btn:after {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        #weixinTip {
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, 0.8);
            filter: alpha(opacity=80);
            width: 100%;
            height: 100%;
            z-index: 100;
        }

        #weixinTip p {
            text-align: center;
            margin-top: 10%;
            padding: 0 5%;
        }

        #weixinTip p span {
            color: #75F1A7;
            font-size: 20px;
        }

        #weixinTip img {
            width: 100%
        }

        #btndown {
            margin-bottom: 15px
        }

        #pc {
            height: auto;
            padding: 15px 40px;
            margin-bottom: 15px;
        }
          #pc hr{
            border-top-color:#0880d7;
          }
        #iphone_note {
            margin-top: 10px;
        }
        /* 小屏幕（平板，大于等于 768px） */

        @media (min-width: 768px) {}
        /* 中等屏幕（桌面显示器，大于等于 992px） */

        @media (min-width: 992px) {
            #page img {
                width: 100%;
            }
            body {
                padding: 0 20%;
            }
        }
        /* 大屏幕（大桌面显示器，大于等于 1200px） */

        @media (min-width: 1200px) {}
    </style>
</head>

<body>
    <header>
        <div id="logo"></div>
        <div id="title"><span>IDC</span><small>官方</small></div>
        <p></p>
    </header>
    <div id="main">
        <div class="table-responsive" id="page">
            <table class="table">
                <tbody>
                    <tr>
                        <td class="swipebox" href="img/page1.png" title="应用截图 1"><img src="img/page1.png" alt=""></td>
                        <td class="swipebox" href="img/page2.png" title="应用截图 2"><img src="img/page2.png" alt=""></td>
                        <td class="swipebox" href="img/page3.png" title="应用截图 3"><img src="img/page3.png" alt=""></td>
                        <td class="swipebox" href="img/page4.png" title="应用截图 4"><img src="img/page4.png" alt=""></td>
                        <td class="swipebox" href="img/page5.png" title="应用截图 5"><img src="img/page5.png" alt=""></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="download" style="padding: 0 20%;">
            <div id="btndown" class="btn-block button button-3d button-small button-primary button-rounded"><span class="icon-download">点击安装</span></div>
            <div id="loading" style="display:none">
                <i class="fa fa-spinner fa-pulse fa-3x text-primary" style="color: #c6f1d4;"></i><br>
                <p id="iphone_note" style="display:none;font-weight: 700;color:#c6f1d4">正在安装<br>请按Home键在桌面查看</p>
            </div>
        </div>
        <div id="pc" style="display:none" class="button button-3d button-primary button-rounded">
            <div class="" style="display: inline-block;">
                <img src="img/app500.png" alt="扫描二维码下载" style="width: 300px;border-radius: 3px;" />
                <hr>
                <h3>扫描二维码下载APP</h3>
            </div>
        </div>
        <div id="weixinTip" style="display:none">
            <p>
                <img src="img/weixin.png" alt="微信打开" />
                <span>微信/QQ 内无法下载应用</span>
            </p>
        </div>
    </div>
    <footer>
        <!-- <div class="detail-expain ellipsis-expain" onclick="toggle_detail()">
             <p style="transition:-webkit-line-clamp 50ms">
                 1. 资产存储，GyPlan支持所有种类的数字资产的存储管理，操作安全便捷，真正打造“一个GyPlan账户，多资产管理”的工具。
                 <br><br>2. 投资理财，为了减轻市场参与者的投资难度，GyPlan开通了低门槛、零手续费的“收益宝”功能，年化6%的收益完全可满足基本的投资需求，是轻松增值资产的不二之选。
                 <br><br>3. 社交，GyPlan内置的点对点加密聊天功能，满足市场投资需求，用户间自由讨论热点时事，社交红包、LBS定位一应俱全。
                 <br><br>4. 支付兑换，GyPlan是未来全球数字交易所的联盟主体，支持所有种类的数字资产，更将加速打通跨境通兑及支付渠道，实现数字资产的全球化应用落地，扩增其应用场景，创造应用价值。
                 <br><br>5. 放心交流，我们使用端对端加密技术，保护用户交流信息的私密性和防窃听性。让用户畅所欲言，在安全网络下及时的交流通讯，享受数字资产红包带来的社交乐趣。
                 <br><br>6. 安全储币，GyPlan钱包采用离线冷存储方式加密存储用户地址私钥。账户转出金额采用离线签名,大额交易采用GOOGLE AUTH、短信二次认证等方式全方面保证账户用户的数字资产安全。
                 <br><br>7. 跨链技术，通过开发数字资产技术的实际性应用，GyPlan实现了一个账户，多种数字资产灵活交易的市场需求。</p>
             <a class="more-btn down-arrow" href="javascript:void(0);"></a>
         </div>-->
        <div class="detail-version">
        </div>
    </footer>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.swipebox.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.swipebox').swipebox();
    });

    function toggle_detail() {
        $('.detail-expain').toggleClass('ellipsis-expain');
    }
</script>
<script type="text/javascript">
    //判断访问终端
    var browser = {
        versions: function() {
            var u = navigator.userAgent,
                app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };

    if (!browser.versions.mobile) {
        //PC
        $('#download').hide();
        $('#pc').show();
    }
    //console.log(browser);
    $('#btndown').on("click", function() {
        if (browser.versions.mobile) {
            if ((browser.versions.weixin || browser.versions.qq) && browser.versions.android) {
                //微信
                $('#weixinTip').show();
            } else {
                if (browser.versions.ios) {
                    //苹果浏览器
                    $('#btndown').fadeOut('fast');
                    $('#loading').delay("fast").fadeIn('slow');
                    $('#iphone_note').delay("fast").fadeIn('fast');
                    //window.location.href = "itms-services://?action=download-manifest&url=https://<?php echo $_SERVER['HTTP_HOST'];?>/app/app.plist";
                    window.location.href = "https://testflight.apple.com/join/rhwhEepV";
                } else if (browser.versions.android) {
                    //安卓浏览器
                    $('#btndown').fadeOut('fast');
                    $('#loading').delay("fast").fadeIn('slow');
                    //window.location.href = "https://china-idc.co/app/idc_0.2.17.apk";
                    window.location.href = "http://idc.mengwx.com/app/idc_0.2.17.apk";
                }
            }
        }
    });
</script>

</html>
